import React, { useState, useEffect } from 'react'
import { Table, Tag, Button, Modal, Popover, Switch } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
const { confirm } = Modal

export default function RightList() {
  const [dataSource, setDataSource] = useState([]);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'name',  // 可写可不写
      render: (id) => <b>{id}</b>
    },
    {
      title: '权限名称',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => <Tag color="green">{key}</Tag>
    },
    {
      title: '操作',
      render: (Item) => <div>
        <Button shape="circle" danger><DeleteOutlined onClick={() => confirmMethod(Item)} /></Button>
        <div style={{ display: "inline-block", padding: "4px" }}></div>
        <Popover content={<div style={{ textAlign: "center" }}><Switch checked={Item.pagepermisson} onChange={() => switchMethod(Item)}></Switch></div>} title="配置项" trigger={Item.pagepermisson === undefined ? "" : "click"}>
          <Button shape="circle" type="primary" primary disabled={Item.pagepermisson === undefined}><EditOutlined /></Button>
        </Popover>
      </div>
    },
  ];

  useEffect(() => {
    axios.get("/rights?_embed=children").then(res => {
      // 树型数据展示的时候，如果是一个空数组也会有展开的按钮；
      // 在一开始拿到数据的时候就把第零项里面的children换为空字符串，不是数组了就不会展开
      // 但是在删除第一项的时候，它的第零项就变了，就还是会有展开按钮的问题
      const list = res.data
      list.forEach(Item => {
        if (Item.children.length === 0) {
          Item.children = ""
        }
      })
      setDataSource(list)
      // console.log(res.data)
      console.log(list);
    })
  }, [])

  // 编辑按钮开关
  const switchMethod = (Item) => {
    Item.pagepermisson = Item.pagepermisson === 1 ? 0 : 1
    setDataSource([...dataSource])
    // console.log(Item.grade);
    // 判断grade字段的层级，层级都要实现开关 ,使用json-server中的patch补丁式的替换方法
    if (Item.grade === 1) {
      axios.patch(`/rights/${Item.id}`, {
        pagepermisson: Item.pagepermisson
      })
    } else {
      axios.patch(`/children/${Item.id}`, {
        pagepermisson: Item.pagepermisson
      })
    }
  }

  // 删除弹窗
  const confirmMethod = (Item) => {
    confirm({
      title: '你确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        // console.log('确定');
        deleteMethod(Item)
      },
      onCancel() {
        // console.log('取消');
      },
    });
  }

  // 删除操作
  const deleteMethod = (Item) => {
    // console.log(Item);
    // 删除的时候有层级结构，有与后端约定grade字段趣判断层级
    if (Item.grade === 1) {
      // filter传入一个回调函数，判断当前id是否等于要删除的id
      setDataSource(dataSource.filter(data => data.id !== Item.id))
      axios.delete(`/rights/${Item.id}`)
    } else {
      console.log(Item.rightId);
      // dataSource在这里过滤的只是第一级
      let list = dataSource.filter(data => data.id === Item.rightId)
      list[0].children = list[0].children.filter(data => data.id !== Item.id)
      console.log(list, dataSource);
      // 对dataSource重新展开解构，才能过滤到第二级
      setDataSource([...dataSource])
      axios.delete(`/children/${Item.id}`)
    }
  }

  return (
    <div>
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={{  // 分页器
          pageSize: 5  // 一页先显示5条数据
        }}
      />
    </div>
  )
}
